<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Steam 登录</title>
	<link rel="stylesheet" type="text/css" href="steam.css">
</head>
<body>
	<div class="global_header">
		<div class="content move">
			<a class="logo" href="#"><img src="img/globalheader_logo.png"></a>
			<ul class="container">
				<li class="menuitem">
					<a href="#">商店</a>
					<div class="supernav supernav1 ">
						<div class="submenu1">
							<a href="#">精选</a>
							<a href="#">探索</a>
							<a href="#">鉴赏家</a>
							<a href="#">愿望单</a>
							<a href="#">新闻</a>
							<a href="#">统计</a>
						</div>
					</div>
				</li>
				<li class="menuitem">
					<a href="#">社区</a>
					<div class="supernav supernav2">
						<div class="submenu2">
							<a href="#">主页</a>
							<a href="#">讨论</a>
							<a href="#">创意工坊</a>
							<a href="#">市场</a>
							<a href="#">实况直播</a>
						</div>
					</div>
				</li>
				<li><a href="#">关于</a></li>
				<li><a href="#">客服</a></li>
			</ul>
			<div class="global_actions">
				<div class="header">
					<span class="header_btn"></span>
					<a class="installsteam" href="#">安装Steam</a>
				</div>
				<a href="#">登录</a>
				<span> &nbsp&nbsp|&nbsp&nbsp </span>
				<a href="#">语言:中文</a>
			</div>
		</div>
	</div>
	<div class="page_header_ctn">
		<div class="page_content">
			<ul class="store move">
				<li class="yourStore">
					<a href="#">您的商店</a>
					<span></span>
					<div class="storeHomepage storeHomepage1">
						<div class="storeNav">
							<a href="#">商店主页</a>
							<div class="hr"></div>
							<a href="#">最近查看过的</a>
							<a href="#">Steam鉴赏家</a>
							<a href="#">最近更新</a>
						</div>
					</div>
				</li>
				<li class="game">
					<a href="#">游戏</a><span></span>
					<div class="storeHomepage storeHomepage2">
						<div class="storeNav">
							<a href="#">免费游玩</a>
							<a href="#">抢先体验</a>
							<a href="#">试玩</a>
							<a href="#">虚拟现实</a>
							<a href="#">支持 Steam 控制器</a>
							<div class="hr"></div>
							<p>按类型浏览:</p>
							<a href="#">休闲</a>
							<a href="#">体育</a>
							<a href="#">冒险</a>
							<a href="#">动作</a>
							<a href="#">大型多人在线</a>
							<a href="#">模拟</a>
							<a href="#">独立</a>
							<a href="#">竞速</a>
							<a href="#">策略</a>
							<a href="#">角色扮演</a>
							<div class="hr"></div>
							<a href="#">查看热门标签</a>
							<div class="hr"></div>
							<p>按平台浏览:</p>
							<a href="#">Mac OS X</a>
							<a href="#">SteamOS + Linux</a>
						</div>
					</div>
				</li>
				<li class="software">
					<a href="#">软件</a><span></span>
					<div class="storeHomepage storeHomepage3">
						<div class="storeNav">
							<a href="#">软件中心</a>
							<div class="hr"></div>
							<a href="#">动画制作舆建模</a>
							<a href="#">实用工具</a>
							<a href="#">教育</a>
							<a href="#">游戏开发</a>
							<a href="#">照片编辑</a>
							<a href="#">网络出版</a>
							<a href="#">视频制作</a>
							<a href="#">设计与插画</a>
							<a href="#">音频制作</a>
						</div>
					</div>
				</li>
				<li class="hardware">
					<a href="#">硬件</a><span></span>
					<div class="storeHomepage storeHomepage4">
						<div class="storeNav">
							<a href="#">Steam 控制器</a>
							<a href="#">Steam 流式盒</a>
							<a href="#">Steam 主机</a>
							<a href="#">HTC Vive</a>
						</div>
					</div>
				</li>
				<li class="video">
					<a href="#">视频</a><span></span>
					<div class="storeHomepage storeHomepage5">
						<div class="storeNav">
							<a href="#">视频中心</a>
							<div class="hr"></div>
							<p>按类型浏览:</p>
							<a href="#">电影</a>
							<a href="#">剧集</a>
							<a href="#">纪录片</a>
							<a href="#">游戏</a>
							<a href="#">教程</a>
							<a href="#">短片</a>
							<div class="hr"></div>
							<p>按类型浏览:</p>
							<a href="#">动作</a>
							<a href="#">日本动画</a>
							<a href="#">欢乐</a>
							<a href="#">剧情</a>
							<a href="#">恐怖</a>
							<a href="#">科幻</a>
						</div>
					</div>
				</li>
				<li><a href="#">新闻</a></li>
				<li class="searchbox">
					<input id="search" placeholder="搜索商品">
					<a class="search" href="#"></a>
				</li>
			</ul>
			<div class="leftcol">
				<div class="checkout_box">
					<div class="loginbox Left">
						<div class="loginbox_left">
							<h2>登录</h2>
							<p>到现有的 Steam 帐户</p>
							<br>
							<div class="login_row">
								<p>Steam 帐户名称</p>
								<input type="text" id="userName">
							</div>
							<div class="login_row mima">
								<p>密码</p>
								<input type="password" id="password">
							</div>
							<input type="checkbox" id="landing">
							<label for="landing">七天免登陆</label>
							<div class="btn_ctn">
								<button id="btn">登录</button>
							</div>
						</div>
						<div class="loginbox_sep"></div>
						<div class="loginbox_right">
							<h2>创建</h2>
							<p>一个新的免费帐户</p>
							<br>
							<p class="joinFree">欢迎免费加入及轻松使用。继续创建 Steam 帐户并获取 Steam - 适合 PC 和 Mac 玩家的前沿数字解决方案。</p>
							<div class="btn_ctn">
								<button>加入 Steam</button>
							</div>
						</div>
					</div>
				</div>
				<br>
				<a class="discolour" href="#">忘记您的密码？</a>
			</div>
			<div class="rightcol">
				<div class="checkout_box">
					<div class="loginbox Right">
						<h2>为什么加入 STEAM？</h2>
						<ul class="havelist">
							<li>购买和下载完整零售游戏</li>
							<li>加入 Steam 社区</li>
							<li>游戏时与好友聊天</li>
							<li>在任何电脑上都能玩</li>
							<li>安排游戏、比赛或 LAN 聚会</li>
							<li>获取自动游戏更新以及更多！</li>
						</ul>
						<br>
						<img src="img/why_join_preview.png">
					</div>
				</div>
				<br>
				<a class="discolour" href="#">了解更多 Steam 的相关信息</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="footer bottom">
		<div class="content move">
			<div class="rule"></div>
			<ul class="footer_nav">
				<li class="menuitem">
					商品类型
					<div class="storeHomepage storeHomepage6">
						<div class="storeNav">
							<a href="#">免费游玩</a>
							<a href="#">动作</a>
							<a href="#">冒险</a>
							<a href="#">策略</a>
							<a href="#">角色扮演</a>
							<a href="#">独立</a>
							<a href="#">大型多人在线</a>
							<a href="#">休闲</a>
							<a href="#">模拟</a>
							<a href="#">竞速</a>
							<a href="#">体育</a>
							<a href="#">财务管理</a>
							<a href="#">动画制作和建模</a>
							<a href="#">音频制作</a>
							<a href="#">设计和插画</a>
							<a href="#">教育</a>
							<a href="#">照片编辑</a>
							<a href="#">软件培训</a>
							<a href="#">实用工具</a>
							<a href="#">视频制作</a>
							<a href="#">网络出版</a>
							<a href="#">抢先体验</a>
							<a href="#">色情内容</a>
							<a href="#">裸露</a>
							<a href="#">暴力</a>
							<a href="#">血腥</a>
							<a href="#">电影</a>
							<a href="#">纪录片</a>
							<a href="#">剧集</a>
							<a href="#">短片</a>
							<a href="#">教程</a>
							<a href="#">360 全景视频</a>
						</div>
					</div>
				</li>
				<li class="menuitem">
					关于 Steam
					<div class="storeHomepage storeHomepage7">
						<div class="storeNav">
							<a href="#">什么是 Steam</a>
							<a href="#">在 Steam 上送礼</a>
							<a href="#">Steam 社区</a>
						</div>
					</div>
				</li>
				<li class="menuitem">
					关于 VALVE
					<div class="storeHomepage storeHomepage8">
						<div class="storeNav">
							<a href="#">关于 Valve</a>
							<a href="#">商业解决方案</a>
							<a href="#">Steamworks</a>
							<a href="#">工作</a>
						</div>
					</div>
				</li>
				<li class="menuitem">
					帮助
					<div class="storeHomepage storeHomepage9">
						<div class="storeNav">
							<a href="#">客服</a>
							<a href="#">论坛</a>
							<a href="#">统计</a>
						</div>
					</div>
				</li>
				<li class="menuitem">
					动态信息
					<div class="storeHomepage storeHomepage10">
						<div class="storeNav">
							<a href="#"><img src="img/ico_rss2.gif"> &nbsp;Steam 新闻</a>
							<a href="#"><img src="img/ico_rss2.gif"> &nbsp;游戏发布</a>
							<a href="#"><img src="img/ico_rss2.gif"> &nbsp;每日特惠</a>
						</div>
					</div>
				</li>
			</ul>
			<br>
			<div class="rule"></div>
			<div class="footer_logo_steam"><img src="img/logo_steam_footer.png"></div>
			<div class="footer_logo"><a href="#"><img src="img/logo_valve_footer.png"></a></div>
			<div class="footer_text">
				<p>©2018 Valve Corporation。保留所有权利。所有商标均为其在美国及其它国家/地区的各自持有者所有。</p>
				<div>所有的价格均已包含增值税（如适用）。 &nbsp;&nbsp;
					<a href="#">隐私政策</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">法律信息</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">Steam 订户协议</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">退款</a>
				</div>
			</div>
			<div classs="rule"></div>
			<div class="valve_links">
				<a href="#">关于 Valve</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">Steamworks</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">工作</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">Steam 分销</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#">礼物卡</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#"><img src="img/ico_facebook.gif"> Steam</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#"><img src="img/ico_twitter.gif"> @steam_games</a>
			</div>
		</div>
	</div>
	// <script src="Loser.js"></script>
	// <script type="text/javascript">
	// 	var btn = document.getElementById("btn")
	// 	var landing = document.getElementById("landing")
	// 	var userName = document.getElementById("userName")
	// 	var password = document.getElementById("password")
	// 	function setCookie(data,date){
	// 		var d = new Date()
	// 		d.setDate(d.getDate() + date)
	// 		for(var i in data){
	// 			document.cookie = i + "=" + data[i] + ";expires=" + d
	// 		}
	// 	}
	// 	btn.onclick = function(){
	// 		var user = userName.value
	// 		var cryptogram = password.value
	// 		if(user !== "" && cryptogram !== ""){
	// 			if(landing.checked){
	// 				setCookie({userName:user},7)
	// 				setCookie({password:cryptogram},7)
	// 			}
	// 			else{
	// 				removeCookie("userName")
	// 				removeCookie("password")
	// 			}
	// 		}
	// 	}
	// 	if(!getCookie("userName")){
	// 		userName.value = ""
	// 		password.value = ""	
	// 	}
	// 	else{
	// 		userName.value = getCookie("userName")
	// 		password.value = getCookie("password")
	// 	}
	// </script>
</body>
</html>